<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>

    <ul id="parent">
        <li>lorem01</li>
        <li>lorem02</li>
        <li>lorem03</li>
        <li>lorem04</li>
        <li>lorem05</li>
        <li>lorem06</li>
        <li>lorem07</li>
        <li>lorem08</li>
        <li>lorem09</li>
        <li>lorem10</li>
    </ul>

    <script>
        // "use strict"
        // ===== this˙指向问题 
        // this总是指向一个对象
        //1.在对象中，this指向这个对象

        // let obj = {
        //     user: 'lisi',
        //     age: 18,
        //     talk() {
        //         console.log(this);
        //     }
        // }
        // obj.talk()

        //2.在构造函数中，this指向实例化出来的对象

        // function Person(name, gender, age) {
        //     this.name = name;
        //     this.age = age;
        //     this.gender = gender;

        // }
        // Person.prototype.introduce = function () {
        //     console.log(this);
        //     console.log(this.name);
        // }
        // let p = new Person('lihua', '男', 18);
        // let p2 = new Person('lihuahua', '男', 18);
        // p.introduce();
        // p2.introduce()


        // 3.在事件函数当中this指向事件源
        // let btn = document.getElementById('btn');
        // btn.onclick = function () {
        //     console.log(this);
        // }

        //4.普通函数中this指向全局
        //node环境中是global对象，浏览器环境中是window对象
        // function foo() {
        //     console.log(this);
        // }
        // foo()

        //以普通函数的方式调用时，无论嵌套多少层，this始终指向全局
        // let test1 = function () {
        //     let test2 = function () {
        //         let test3 = function () {
        //             console.log(this);
        //         }
        //         test3()
        //     }
        //     test2()
        // }
        // test1()


        // let user = {
        //     name: 'javascript',
        //     show() {
        //         console.log(this);
        //     }
        // }
        // let fn = user.show;
        // //把user的show方法直接赋值给fn，
        // //fn函数依旧是普通函数调用，所以还是指向全局
        // fn()
        // let foo = function () {
        //     console.log(this.name);
        // }
        // // foo()
        // user.intro = foo;
        // user.intro();


        //5.箭头函数的this
        // 箭头函数没有自己的this指向，外层作用域指向谁，就是谁
        // let fn = () => {
        //     console.log(this);
        // }
        // fn()

        // let obj = {
        //     name: 'zhangsan',
        //     show: function () {
        //         let test = function () {
        //             console.log(this);
        //         }
        //         test()//普通函数，没有具体调用者，就是全局
        //     },
        //     show2: function () {
        //         let test2 = () => {
        //             console.log(this);
        //         }
        //         test2()
        //     }
        // }

        // obj.show()
        // obj.show2()


        //===== 改变this指向
        // 1.call()
        // 2.apply()
        // 3.bind()

        let obj = {
            name: 'zhangsan',
            age: 20,
            show() {
                console.log(this.name);
            }
        }
        obj.show()

        let fn = function () {
            console.log(this.age);
        }
        fn.call(obj)//让函数指向obj
        fn.apply(obj)



        let lis = document.getElementsByTagName('li');
        let newArr = [...lis].slice(1, 7);
        // let ul = document.getElementById('parent');
        // ul.innerHTML=''
        // newArr.forEach(function (item) {
        //     ul.innerHTML += `
        //     <li>${item.innerText}</li>
        //     `
        // })
        //call和apply的区别是apply接收一个数组作为参数
        // let m = Array.prototype.slice.call(lis);
        // let m = Array.prototype.slice.call(lis, 1, 7);
        let m = Array.prototype.slice.apply(lis, [1, 7])
        console.log(newArr);
        console.log(m);
        let arr3 = [17, 11, 12, 3, 4, - 11];
        console.log(Math.max(7, 10, 13, 100));
        console.log(Math.max.apply(null, arr3));
        console.log(Math.max(...arr3));



        // let arr = [1, 2, 3];
        // let a = arr.slice();
        // arr[1] = 100;
        // console.log(arr);
        // console.log(a);

        //bind()  返回一个新的函数
        //bind将函数体内部的this绑定到某个对象，返回一个新的函数

        let student = {
            name: '张鸿君',
            age: 23,
            show() {
                console.log(this.name, this.age);
            }
        }
        student.show();
        let fn3 = function () {
            console.log(this.name, this.age);
        }
        fn3.call(student)
        fn3.apply(student)

        let fn4 = fn3.bind(student);
        fn4()

    </script>

</body>

</html>